<template>
  <div class="apply">
    <div class="apply-title">申请使用该桌子成员列表</div>
    <div class="all" v-if="applyList.length > 0">
      <div class="order-all">
        <div class="order-handle">
          <div class="handle-name">昵称</div>
          <div class="handle-doing">操作</div>
        </div>
        <div class="order-list" v-for="(item,i) in applyList" :key="i">
          <div class="order-left">{{item.user.name}}</div>
          <div class="order-right" v-if="item.agree == 0">
            <div class="agree" @click="agree(item.applicant_id)">同意</div>
            <div class="reject" @click="reject(item.applicant_id)">拒绝</div>
          </div>
          <div v-else-if="item.agree == 1">已同意</div>
          <div v-else>已拒绝</div>
        </div>
      </div>
    </div>
    <!-- 没人申请 -->
    <div class="empty" v-else>
      <div class="empty-text">暂时还没有人申请同桌</div>
    </div>
    <!-- 导航 -->
    <div class="shop-nav">
      <div class="buy" @click="backList">返回菜单</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'applyList',
  components: {},
  data() {
    return {
      id:0,
      applyList: []
    }
  },
  activated() {
    this.id = this.getUrlParmas('id')
    axios.post('api/scan_need_agrees',{'id':this.id}).then( res => {
      console.log(res)
      if(res.data.data != null) {
        this.applyList = res.data.data
      }else {
        this.applyList = []
      }
    }).catch( error => {
      console.log(error)
    })
  },
  methods: {
    backList() {
      this.$router.push({path: '/'})
    },
    //获取url参数
    getUrlParmas(name) {
      let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      let r = window.location.search.substr(1).match(reg);
      if(r!=null)
      return unescape(r[2]);
      return null;
    },
    //同意申请
    agree(applyID) {
      axios.post('api/scan_sure_in',{'id':this.id,'applicant_id':applyID,'agree':1}).then( res => {
        this.$toast(res.data.info)
        axios.post('api/scan_need_agrees',{'id':this.id}).then( res => {
          if(res.data.data != null) {
            this.applyList = res.data.data
          }else {
            this.applyList = []
          }
        }).catch( error => {
          console.log(error)
        })
      }).catch( error => {
        console.log(error)
      })
    },
    //拒绝申请
    reject(applyID) {
      axios.post('api/scan_sure_in',{'id':this.id,'applicant_id':applyID,'agree':2}).then( res => {
        this.$toast(res.data.info)
        axios.post('api/scan_need_agrees',{'id':this.id}).then( res => {
          if(res.data.data != null) {
            this.applyList = res.data.data
          }else {
            this.applyList = []
          }
        }).catch( error => {
          console.log(error)
        })
      }).catch( error => {
        console.log(error)
      })
    },
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .apply
    background #f1f1f1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    .apply-title
      padding 0 0.3rem
      height 0.8rem
      line-height 0.8rem
      font-size 0.32rem
      background #f8f8f8
      border-bottom 0.01rem solid #dfdfdf
      text-align center
    .all
      padding-bottom 75px
      .order-all
        background #ffffff
        .order-handle
          padding 0.25rem 0.3rem
          position relative
          display flex
          justify-content space-between
          align-items center
          font-size 0.34rem
          &::after
            content ''
            position: absolute
            height: 2px
            -webkit-transform: scale(1,.5)
            transform: scale(1,.5)
            -webkit-transform-origin: 0 bottom
            transform-origin: 0 bottom
            bottom: 0
            left 0
            right 0
            border-bottom: 1px solid #e1e1e1
          .handle-name,.handle-doing
            width 1.5rem
            text-align center
            color #f01414
        .order-list
          padding 0.25rem 0.3rem
          position relative
          display flex
          justify-content space-between
          align-items center
          &::after
            content ''
            position: absolute
            height: 2px
            -webkit-transform: scale(1,.5)
            transform: scale(1,.5)
            -webkit-transform-origin: 0 bottom
            transform-origin: 0 bottom
            bottom: 0
            left 0.3rem
            right 0
            border-bottom: 1px solid #e1e1e1
          .order-left
            font-size 0.32rem
          .order-right
            color #fff
            .agree
              padding 0.1rem 0.2rem
              background #3b95e3
              float left
            .reject
              padding 0.1rem 0.2rem
              background #f01414
              float left
              margin-left 0.2rem
    .empty
      margin-top 100px
      color #666
      text-align center
      .empty-text
        font-size 16px
        margin-top 20px
    .shop-nav
      position: fixed;
      z-index: 19;
      right: 15px;
      bottom: 15px;
      left: 15px;
      height: 0.8rem;
      display flex
      justify-content center
      .buy
        min-width 2.5rem
        height 0.8rem
        background rgba(32,29,26,.82)
        border-radius 0.4rem
        color #fff;
        line-height 0.8rem
        font-size 0.3rem
        position relative
        text-align center
</style>